.annotation-button
  display flex
  padding 4px 8px
  border-radius 4px 4px 0 0
  border-width 1px 1px 0px 1px
  border-style solid
  background-color var(--sand_200)
  border-color transparent
  margin-top 2px
  align-items center
  gap 8px
  cursor pointer
  height calc(100% - 3px)
  min-width 186px

  &__user
    line-height: 16px;
    height: 16px;

  &__main
    flex: 1 0 auto;
  &__mainSection
    display flex
    align-items center
    gap 8px
    flex: 1 0 auto;
    .annotation-button__userpic_prediction
      background-color var(--plum_100)
      color var(--plum_500)
  &__name
    font-size 12px
    font-weight 400
    line-height 16px
    letter-spacing 0.4px
    text-align left
    color: var(--sand_700);
  &__entity-id
    font-size 10px
    font-weight 400
    line-height 16px
    letter-spacing 0.4px
    text-align left
    color: var(--sand_700);
    margin-left 8px
  &__created
    font-size 10px
    font-weight 400
    line-height 16px
    letter-spacing 0.4px
    text-align left
    color: var(--sand_700);

  &:hover
    background-color var(--grape_0)
    border-color var(--grape_100)
    border-bottom-color transparent

    .annotation-button__name
      color #1F1F1F

    .annotation-button__created
      color #413C4A

    .annotation-button__ellipsisIcon
      visibility visible

  &_selected
    background-color var(--sand_0)
    border-color var(--sand_300)

    &:hover
      background-color var(--sand_0)
      border-color var(--sand_300)
      border-bottom-color transparent

    .annotation-button__ellipsisIcon
      visibility visible
    .annotation-button__created
      color #413C4A
    .annotation-button__name
      color #413C4A

  &__icons
    display inline-flex
    align-items center
    gap 12px
  &__icon
    display flex
    border-radius 4px
    &_groundTruth
      color var(--canteloupe_400)
  &__ellipsisIcon
    transform rotate(90deg)
    display flex
    border-radius 4px
    color var(--sand_700)
    visibility hidden
    &:hover
      color var(--grape_500)
      background var(--grape_0)
  &__picSection
    position relative
  &__status
    position absolute
    top: 15px;
    left: calc(50% + 5px);
    border-radius 4px
    color #FAFAFA
    border 2px solid var(--sand_300)
    display flex
    width 10px
    height 10px
    box-sizing content-box
    align-items center
    justify-content center
    &_approved
      background-color var(--success_color)
    &_skipped
      background-color var(--danger_color)
    &_updated
      background-color var(--grape_500)
      svg
        display block
  &_contextMenuOpen
    .annotation-button
      &__ellipsisIcon
        color var(--grape_500)
        background var(--grape_0)

.AnnotationButtonContextMenu
  border-radius 4px
  box-shadow: 0px 1px 3px 1px #26262626, 0px 1px 2px 0px #2626264D;
  &__seperator
    height 1px
    background-color var(--sand_100)
  &__option
    display flex
    margin 8px
    align-items center
    white-space nowrap
    gap 2px
    cursor pointer
    font-size 14px
    font-weight 400
    line-height 22px
    border-radius 4px
    padding-right 32px
    &:hover
      background-color var(--grape_0)
      color var(--grape_500)
    &_duplicate
      padding-top 6px
      padding-bottom 6px
      .AnnotationButtonContextMenu__icon
        display flex
        padding 0 8px 0 9px
        align-items center
    &_delete
      padding-top 6px
      padding-bottom 6px
      color var(--danger_color)
      &:hover
        background-color var(--red_1)
        color var(--danger_color)
    &_delete
      .AnnotationButtonContextMenu__icon
        display flex
        padding 4px 11px 4px 12px
        align-items center
    
